import React, { useState, useCallback } from "react";
import { Button } from "antd";

//类组件
/* class Child extends React.PureComponent{
    render(){
        console.log('Child Render');
        return <div>
            我是子组件
        </div>
    }
} */
//函数组件
const Child = React.memo(() => {
    console.log('Child Render');
    return <div>
        我是子组件
    </div>
})

// 父组件
//诉求：当父组件更新的时候，因为传递给子组件的属性仅仅是一个函数[特点：基本应该算是不变的]，所以不想让子组件也跟着更新了
// + 第一条：传递给子组件的属性(函数)，每一次需要相同的堆内存地址(是一致的）,基于useCallback处理！
// + 第二条：在子组件内部也要做一个处理，验证父组件传递的属性是否发生改变，如果没有改变，则让子组件不再更新，有变化才需要更新。继承React.pureComponent即可[在shouldComponentUpdate中对新老属性做了浅比较]！！函数组件事基于React.memo函数，对新老传递的属性做比较，如果不一致，才会把函数组件执行，如果一致，则不让子组件更新！！
export default function Demo() {
    let [num, setNum] = useState(0);
    // const xxx = ()=>{}
    const xxx = useCallback(() => {

    }, [])
    return <div className="vote-box" style={{
        width: 100,
        height: 70,
        margin: '0 auto'
    }}>
        <Child handler={xxx} />
        <div className="main">
            <p>{num}</p>
        </div>
        <div className="footer">
            <Button type="primary" onClick={() => {
                setNum(num + 1)
            }}>累加</Button>
        </div>
    </div>
}
/* export default function Demo(){
    let [num,setNum] = useState(0);
    /**
     * const xxx = useCallback(callback,[dependencies])
     *  + 组件第一次渲染，useCallback执行，创建一个函数"callback",赋值给 xxx
     *  + 组件后续每一次更新，判断依赖的状态值是否改变，如果改变，则重新创建新的函数堆，赋值给 xxx；但是如果依赖的状态没有更新[或者没有设置依赖'[]']则xxx 获取的一直都是第一次创建的函数堆，不会创建出新的函数来
     *  + 或者说，基于 useCallback，可以始终获取第一次创建函数的堆内存地址(或者说函数的引用)
     * 
     * 简单来说：useCallback可以保证，函数组件的每一次更新，不再把里面的小函数重新创建，用的都是第一次创建的
     * useCallback不要乱用！并不是所有组件内部的函数，都拿其处理会更好！！
     *  + 虽然减少了堆内存的开辟
     *  + 但是 useCallback本身也有自己的处理逻辑和缓存机制，这个也消耗时间！
     * 
     * 啥时候用它呢？
     *  + 父组件切套子组件，父组件要把一个内部的函数，基于属性传递给自组件，此时传递的这个方法，我们基于 useCallback处理一个会更好！！
     *！/
    const xxx = useCallback(()=>{

    },[num])
    if(!prev){
        prev = xxx;
    }else{
        console.log(prev === xxx);
    }

    return <div className="vote-box" style={{
        width:100,
        height:70,
        margin: '0 auto'
    }}>
        <div className="main">
            <p>{num}</p>
        </div>
        <div className="footer">
            <Button type="primary" onClick={()=>{
                setNum(num + 1)
            }}>累加</Button>
        </div>
    </div>
} */